<template>
  <div id="campus_manage" class="container">
    <div class="content">
      <!-- <div class="title">机构管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <span class="condition_name">合作类型</span>
            <el-select
              v-model="tabledisplayObj.cooperateMode"
              clearable
              placeholder="选择合作类型"
              style="width: 1.8rem;"
            >
              <el-option
                v-for="item in cooperationModeList"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>&emsp;
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 机构名、负责人、手机号"
              v-model="tabledisplayObj.generalTerm"
              class="input_search"
              clearable
            ></el-input>
            <div v-if="hasApi('orgListPage')" @click="searchCampus()" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <div
              v-if="!isShowBtn && hasApi('orgAdd')"
              class="right_btn"
              @click="openAdd"
            >新&nbsp&nbsp增</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 1rem;">编号</td>
                <td style="width: 3rem;">机构名称</td>
                <td style="width: 3rem;">机构类型</td>
                <td style="width: 3rem;">机构地址</td>
                <td style="width: 2rem;">负责人</td>
                <td style="width: 3rem;">手机号</td>
                <td style="width: 1.5rem;">合作类型</td>
                <td style="width: 4rem;">合作期间</td>
                <td style="width: 1.5rem;">状态</td>
                <td style="width: 2rem;">创建人</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in orgList">
                <td>{{index+1}}</td>
                <td>{{item.orgName}}</td>
                <td>{{item.orgModeName}}</td>
                <td>{{item.orgAddr}}</td>
                <td>{{item.adminUserName}}</td>
                <td>{{item.adminPhone}}</td>
                <td>{{item.cooperateModeName}}</td>
                <td v-if="item.isNoTime">无限期</td>
                <td v-else>{{item.serveStartTimeShow}}至{{item.serveEndTimeShow}}</td>
                <td>{{item.isUse == '1'?"正常":"禁用"}}</td>
                <td>{{item.createUserName}}</td>
                <td>
                  <span
                    v-if="hasApi('orgInfo')"
                    class="operate_btn"
                    style="color:#67C23A;"
                    @click="handleLook(index,item)"
                  >查看</span>
                  &nbsp;
                  <span
                    v-if="hasApi('orgUpdate')"
                    class="operate_btn"
                    @click="handleEdit(index,item)"
                  >编辑</span>
                  &nbsp;
                  <span
                    v-if="!isShowBtn && hasApi('orgToogleStatus')"
                    class="operate_btn"
                    @click="handleDelete(index,item)"
                  >{{item.isUse == '1'?"禁用":"启用"}}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>

    <createOrganization ref="createOrganization" @callback="closeAdd"></createOrganization>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import createOrganization from "./common/createOrganization";
let vm;
let user;
export default {
  data() {
    return {
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0,
        cooperateMode: "",
        generalTerm: ""
      },
      orgList: [],
      isShowBtn: false,
      cooperationModeList: [],
      orgModeList: []
    };
  },
  components: {
    createOrganization
  },
  watch: {},
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 抽取出来获取课程类别列表
     */
    getData(paras) {
      let orgtemp = []; //临时存放列表
      api.orgListPage(paras).then(function(data) {
        console.log(data);
        if (data.result == "操作成功") {
          orgtemp = data.list;
          for (let i = 0; i < orgtemp.length; i++) {
            orgtemp[i].serveStartTimeShow = orgtemp[i].serveStartTime.split(
              " "
            )[0];
            orgtemp[i].isNoTime = orgtemp[i].cooperateOrgMode == 1;
            orgtemp[i].serveEndTimeShow = orgtemp[i].serveEndTime.split(" ")[0];
            for (let y = 0; y < vm.cooperationModeList.length; y++) {
              if (
                vm.cooperationModeList[y].value == orgtemp[i].cooperateOrgMode
              ) {
                orgtemp[i].cooperateModeName = vm.cooperationModeList[y].name;
              }
            }
            for (let y = 0; y < vm.orgModeList.length; y++) {
              if (vm.orgModeList[y].value == orgtemp[i].orgMode) {
                orgtemp[i].orgModeName = vm.orgModeList[y].name;
              }
            }
          }
          vm.tabledisplayObj.total = data.totalCount;
          vm.orgList = orgtemp;
        }
      });
    },
    openAdd() {
      vm.$refs.createOrganization.init({});
    },
    closeAdd(data) {
      console.log(data);
      this.initData();
    },
    pageSizeChange: function(val) {
      //页条数发生改变
      vm.tabledisplayObj.pageSize = val;
      this.getData(vm.tabledisplayObj);
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      console.log(val);
      vm.tabledisplayObj.currPage = val;
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 点击查看
     */
    handleLook(index, row) {
      console.log(index, row);
      let data = tool.clone(row);
      data.isShow = true;
      vm.$refs.createOrganization.init(data);
    },
    /**
     * 点击编辑
     */
    handleEdit(index, row) {
      console.log(index, row);
      vm.$refs.createOrganization.init(tool.clone(row));
    },
    /**
     * 点击删除
     */
    handleDelete(index, row) {
      console.log(index, row);
      if (row.isUse == "1") {
        this.$confirm("此操作将禁用该机构, 是否继续?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
          .then(() => {
            var paras = {
              orgId: row.orgId,
              isUse: "0"
            };
            api.orgToogleStatus(paras).then(function(data) {
              console.log(data);
              if (data.result == "操作成功") {
                vm.$message({
                  message: "禁用成功",
                  type: "success"
                });
                vm.initData();
              } else {
                this.$message.error(data.result);
              }
            });
          })
          .catch(() => {});
      } else {
        this.$confirm("此操作将启用该机构, 是否继续?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
          .then(() => {
            var paras = {
              orgId: row.orgId,
              isUse: "1"
            };
            api.orgToogleStatus(paras).then(function(data) {
              console.log(data);
              if (data.result == "操作成功") {
                vm.$message({
                  message: "启用成功",
                  type: "success"
                });
                vm.initData();
              } else {
                this.$message.error(data.result);
              }
            });
          })
          .catch(() => {});
      }
    },
    /**
     * 搜索
     */
    searchCampus() {
      vm.tabledisplayObj.currPage = 1;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.cooperationModeList = dicdata["cooperate_org_mode"];
    vm.orgModeList = dicdata["organization_type"];
    if (user.roleMode == 1) {
      vm.isShowBtn = true;
    }
    this.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
#campus_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>